<template>
  <section class="card-container">
    <van-skeleton
      :row="row"
      :loading="loading"
    >
      <section class="card-header-container">
        <slot
          v-if="slots.title"
          name="title"
        />
        <h3
          v-else
          class="card-header"
        >
          <span class="title">{{ title }}</span>
          <span class="subtitle">{{ subtitle }}</span>
        </h3>

        <section class="pr-12">
          <slot name="options" />
        </section>
      </section>

      <slot />
    </van-skeleton>
  </section>
</template>

<script lang="ts" setup>
import { useSlots } from 'vue';

const slots = useSlots();

defineProps({
  title: {
    type: String,
    default: '',
  },
  subtitle: {
    type: String,
    default: '',
  },
  loading: { // 骨架屏loading
    type: Boolean,
    default: false,
  },
  row: { // 使用骨架屏的row
    type: Number,
    default: 3,
  },
});
</script>

<style lang='scss' scoped>
.card-container {
  position: relative;
  background-color: var(--#{$ns}-color-white);
  border-radius: 4px;

  .card-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    background-image: linear-gradient(269deg, #fff 0%, #e2f0fe 100%);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    .card-header {
      box-sizing: border-box;
      padding-left: var(--#{$ns}-space-size-base);

      .title {
        font-size: var(--#{$ns}-font-size-large);
        font-weight: 600;
      }

      .subtitle {
        margin-left: 6px;
        font-size: var(--#{$ns}-font-size-small);
        color: var(--#{$ns}-text-color-regular);
      }
    }
  }
}
</style>
